<!-- 该组件为弹窗 + 表格组件，用于部分数据不便于下拉展示，可能需要弹窗 + 表格的形式进行选择 -->
<template>
  <basic-dialog
    v-model="visible"
    :title="title"
    :width="width"
    :autoClose="autoClose"
    :hideFooter="hideFooter"
    :destroy-on-close="destroyOnClose"
    :before-close="beforeClose"
    :submitBtnLoading="submitBtnLoading"
    @submit="handleSubmit"
    @cancek="handleCancel"
  >
    <basic-crud
      v-bind="attrs"
      ref="basicCrudRef"
      :selectType="selectType"
      v-model:defaultSelectList="defaultSelectList"
    >
      <template v-for="slot in slotList" :key="slot.name" #[slot.name]="data">
        <slot :name="slot.name" v-bind="data"></slot>
      </template>
    </basic-crud>
    <template v-for="slot in slotList" :key="slot.name" #[slot.name]="data">
      <slot :name="slot.name" v-bind="data"></slot>
    </template>
  </basic-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'

// 如果插槽名称已"dialog-"开头则设定为弹窗插槽
const slots = useSlots()
const attrs = useAttrs()
const defaultSelectList = defineModel('defaultSelectList', { default: [] })
// crud的插槽
const slotList = computed(() => {
  let res = []
  if (slots) {
    Object.keys(slots).forEach((name) => {
      res.push({ name, slot: slots[name] })
    })
  }
  return res
})
const props = defineProps({
  title: {
    type: String,
    default: '弹窗标题',
  },
  width: {
    type: [String, Number],
    default: '50%',
  },
  // 是否必填
  required: {
    type: Boolean,
    default: true,
  },
  // 选择类型
  // none: 无法选择
  // radio: 单选
  // multiple: 多选
  selectType: {
    type: String,
    default: 'none',
  },
  // 返回格式，多选只能为array，单选可以设置为object
  returnType: {
    type: String,
    default: 'array',
  },
  autoClose: {
    type: Boolean,
    default: false,
  },
  beforeClose: Function,
  submitBtnLoading: Boolean,
  hideFooter: {
    type: Boolean,
    default: false,
  },
  destroyOnClose: {
    type: Boolean,
    default: true,
  },
})
const visible = defineModel()
const basicCrudRef = ref(null)
const emits = defineEmits(['submit', 'cancel'])
const handleSubmit = () => {
  if (props.selectType !== 'none') {
    if (props.required && basicCrudRef.value.selectData.length === 0) {
      ElMessage.warning('数据不能为空！')
      throw new Error('数据不能为空！')
    }
    let resData = basicCrudRef.value.selectData
    if (
      props.selectType === 'radio' &&
      props.returnType === 'object' &&
      resData.length > 0
    ) {
      resData = basicCrudRef.value.selectData[0]
    }
    emits('submit', resData)
  } else {
    emits('submit')
  }
  props.autoClose && (visible.value = false)
}
const handleCancel = () => {
  emits('cancel')
  visible.value = false
}
// 关闭弹窗清空选中数据
watch(
  () => visible.value,
  (newV) => {
    if (!newV) {
      defaultSelectList.value = []
    }
  }
)
defineExpose({
  basicCrudRef: basicCrudRef,
})
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &_title {
    font-weight: bold;
  }
  &_icon {
    width: 22px;
    height: 22px;
  }
}
</style>
